<template>

  <el-dialog
    :visible.sync="showAddPart"
    :show-close="false"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="80%"
    title="配件选择"
    top="3vh"
  >
    <div class="searchform">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchParams"
        size="mini"
        label-width="90px"
      >
        <el-form-item label="配件代码">
          <el-input v-model="searchParams.partCode" class="search-input" clearable size="mini"/>
        </el-form-item>
        <el-form-item label="配件名称">
          <el-input v-model="searchParams.partName" class="search-input" clearable size="mini"/>
        </el-form-item>
        <el-form-item label="配件类别">
          <r-select v-model="searchParams.partGroupCode" class="search-input" type="1300"/>
        </el-form-item>
        <div style="text-align:center">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="searchParams= {}">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <BaseTable
      ref="searchTable"
      height="150"
      @chaneg-size="changeSizeHandle"
      @chaneg-page="changePageHandle"
      @change-next="changeNext"
      @change-prev="changePrev"
      @current-change="handleCurrentChange"
    >
      <el-table-column align="center" label="序号" type="index" min-width="10"/>
      <el-table-column prop="PART_CODE" align="center" label="配件代码" min-width="150"/>
      <el-table-column prop="PART_NAME" align="center" label="配件名称" min-width="180"/>
      <el-table-column
        :formatter="filterCode"
        prop="PART_GROUP_CODE"
        align="center"
        label="配件类别"
        type="1300"
      />
      <el-table-column prop="SALE_PRICE" align="center" label="销售单价"/>
      <el-table-column
        :formatter="filterCode"
        prop="PART_STATUS"
        align="center"
        label="是否停用"
        type="1004"
      />
    </BaseTable>

    <div class="part-info" style="margin-top: 10px">
      <el-form ref="partForm" :inline="true" :model="partParams" size="mini" label-width="90px">
        <el-form-item label="配件代码">
          <el-input
            v-model="partParams.PART_CODE"
            class="search-input"
            clearable
            size="mini"
            readonly
          />
        </el-form-item>
        <el-form-item label="配件名称">
          <el-input
            v-model="partParams.PART_NAME"
            class="search-input"
            clearable
            size="mini"
            readonly
          />
        </el-form-item>
        <el-form-item :rules="tie1" label="数量" prop="canNumShow">
          <el-input
            v-model.number="partParams.canNumShow"
            class="search-input"
            clearable
            size="mini"
          />
        </el-form-item>
        <el-form-item label="销售单价" prop="SALE_PRICE">
          <el-input
            v-model.number="partParams.SALE_PRICE"
            class="search-input"
            clearable
            readonly
            size="mini"
          />
        </el-form-item>
        <el-form-item label="销售金额">
          <el-input :value="total" readonly class="search-input" clearable size="mini"/>
        </el-form-item>
      </el-form>
    </div>

    <div style="text-align:center;padding: 10px 0">
      <el-button type="primary" icon="el-icon-document" @click="save">确定</el-button>
      <el-button icon="el-icon-back" @click="back">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import rSelect from '@/components/Select/Select'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import { repairPartInfo } from '@/api/repair/order/repairOrder'
import { mapMutations } from 'vuex'
export default {
  components: {
    rSelect,
    BaseTable
  },
  mixins: [formMixins],
  // eslint-disable-next-line vue/require-prop-types
  props: ['deleteLabourCode', 'showAddPart', 'labourCode'],
  data() {
    const validateNum = (rule, value, callback) => {
      if (/^\d+(\.\d{1,2})?$/.test(value)) {
        callback()
      } else {
        callback(new Error('请填写正整数，可保留两位'))
      }
    }
    const validateNum1 = (rule, value, callback) => {
      if (/^\d+$/.test(value)) {
        callback()
      } else {
        callback(new Error('请填写正整数'))
      }
    }
    return {
      tie: [
        {
          required: true,
          validator: validateNum,
          trigger: 'blur'
        }
      ],
      tie1: [
        {
          required: true,
          validator: validateNum1,
          trigger: 'blur'
        }
      ],
      search: {
        limit: 10,
        pageNum: 1
      },
      searchParams: {},
      partParams: {},
      row: null,
      // showAddPart: false,
      flag: false
    }
  },
  computed: {
    table: {
      get() {
        return this.$store.state.custom.searchPart
      },
      set(newValue) {
        this.$store.state.custom.searchPart = newValue
      }
    },
    total() {
      const res = this.partParams.SALE_PRICE * this.partParams.canNumShow
      const flag = Number.isNaN(res)
      return flag ? '' : res.toFixed(2)
    }
  },
  watch: {
    deleteLabourCode(val, old) {
      if (val) {
        this.filterSeachPartGMS(val)
        this.$emit('tableSecond', this.table)
      }
    },
    labourCode(val, old) {
      this.table = this.table.map(v => {
        const code = v.labourCode
        if (code in val) {
          this.$set(v, 'chargePartitionCode', val[code].priceType)
        }
        return v
      })
    },
    table: {
      deep: true
    }
  },
  methods: {
    addSecond() {
      this.showAddPart = true
    },
    ...mapMutations([
      'saveSearchPartGMS',
      'deleteSearchPartGMS',
      'filterSeachPartGMS'
    ]),
    deleteSecondRow(scope) {
      this.deleteSearchPartGMS(scope.$index)
      this.$emit('tableSecond', this.table)
    },
    handelChangeLabour(ev) {
      for (const k in this.labourCode) {
        if (ev === k) {
          this.partParams.labourName = this.labourCode[k].name
        }
      }
    },
    searchHandle() {
      const table = this.$refs['searchTable']
      // 初始化
      for (const k in this.searchParams) {
        if (!this.searchParams[k]) {
          delete this.searchParams[k]
        }
      }
      const params = Object.assign({}, this.search, this.searchParams)
      table.wait()
      repairPartInfo(params).then(res => {
        table.complete().filData(res)
        this.partParams = {}
      })
    },
    handleCurrentChange(row) {
      if (row) {
        this.partParams = row
        this.row = row
      }
    },
    save() {
      this.$refs['partForm'].validate(valid => {
        if (valid) {
          if (this.row) {
            this.row.unit = this.partParams.unitShow
            this.row.discount = 1
            this.row.salesPriceShow = this.partParams.SALE_PRICE
            var disAmount = this.partParams.canNumShow * this.partParams.SALE_PRICE
            this.row.salesAmountShow = disAmount.toFixed(2)
            this.row.PART_NO = this.partParams.PART_CODE
            this.$emit('selectRow2', this.partParams)
          } else {
            this.$message({
              type: 'warning',
              message: '请选择一条数据'
            })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请完成填写'
          })
        }
      })
    },
    back() {
      // this.partParams = {}
      // this.row = null
      // this.showAddPart = false
      this.$emit('update:showAddPart', false)
    }
  }
}
</script>

<style scoped>
</style>
